<template>
    <div id="chart-panel" style="width: calc(100vw - 150px);height:calc(100vh - 100px); padding: 30px; margin: 0 auto;"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: 'ChartComponent',
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        var myChart = echarts.init(document.getElementById('chart-panel'));
        var dataAll = [8505, 7966, 7833, 6192, 4823, 4757, 4090, 3821, 3821, 3711];//亿千瓦时
        var yAxisData = ['广东','山东','江苏','浙江','内蒙古','河北','河南','新疆','四川','安徽'];
        var option = {
          backgroundColor: '#0f375f',
          title:[
            {text:"发电量的占比（万千瓦）",x: '2%', y: '1%',textStyle:{color:"#fff",fontSize:"14"}},
            {text:"全国用电排行（亿千瓦时）",x: '40%', y: '1%',textStyle:{color:"#fff",fontSize:"14"}},
            {text:"24年用电量占比（亿千瓦时）",x: '2%', y: '50%',textStyle:{color:"#fff",fontSize:"14"}},
          ],
          grid: [
            {x: '50%', y: '7%', width: '45%', height: '90%'},
          ],
          tooltip: {
            formatter: '{b} ({c})'
          },
          xAxis: [
            {gridIndex: 0, axisTick: {show:false},axisLabel: {show:false},splitLine: {show:false},axisLine: {show:false }},
          ],
          yAxis: [
             { gridIndex: 0, interval:0,data:yAxisData.reverse(),
              axisTick: {show:false}, axisLabel: {show:true},splitLine: {show:false},
              axisLine: {show:true,lineStyle:{color:"#6173a3"}},
            }
          ],
          series: [
            {
              name: '发电量的占比',
              type: 'pie',
              radius : '30%',
              center: ['22%', '25%'],
              color:['#86c9f4','#4da8ec','#3a91d2','#005fa6','#315f97'],
              data:[
                {value:42154, name:'水电'},
                {value:139032, name:'火电'},
                {value:5691, name:'核电'},
                {value:44134, name:'风电'},
                {value:60949, name:'太阳能发电'},
              ],
              labelLine:{normal:{show:false}},
              itemStyle: {normal: {label:{ show: true,  formatter: '{b}  ({d}%)', textStyle:{color:'#B1B9D3'}} },},
            },
            {
              name: '24年用电量占比',
              type: 'pie',
              radius : '30%',
              center: ['22%', '75%'],
              color:['#86c9f4','#4da8ec','#3a91d2','#005fa6','#315f97'],
              labelLine:{normal:{show:false}},
              data:[
                {value:495, name:'第一产业'},
                {value:25365, name:'第二产业'},
                {value:6918, name:'第三产业'},
                {value:5592, name:'城乡居民用电'},
              ],
              itemStyle: {normal: {label:{ show: true,  formatter: '{b}  ({d}%)', textStyle:{color:'#B1B9D3'}} },},
            },
            {
              name: '投诉原因TOP10',
              type: 'bar',xAxisIndex: 0,yAxisIndex: 0,barWidth:'45%',
              itemStyle:{normal:{color:'#86c9f4'}},
              label:{normal:{show:true, position:"right",textStyle:{color:"#9EA7C4"}}},
              data: dataAll.sort(),
            },

          ]
        };
        if (option && typeof option === 'object') {
          myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
      }
    }
  };
</script>
